
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 300px;
            margin-top: 100px;
            margin-left: 100px;
            border: 1px solid #ccc;
            overflow: auto;
        }

        p {
            width: 500px;
        }
    </style>
</head>

<body>
<div class="box" id="demo">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam asperiores aspernatur at aut harum iure molestias nisi quos vel. A, dicta inventore nisi nobis praesentium quas ullam vero! Beatae enim laborum nam nulla quaerat quos rem. A alias asperiores assumenda at autem culpa deleniti dolorum earum est facilis fugiat fugit nam nesciunt obcaecati perspiciatis placeat porro quas qui quia quis rem sequi soluta, tenetur veritatis voluptate. Asperiores consequuntur delectus error ex explicabo mollitia natus nobis? Aperiam asperiores assumenda autem corporis eligendi expedita fuga, harum hic molestias nemo numquam praesentium quaerat ratione recusandae repellat velit voluptas voluptatibus! Accusantium alias consectetur consequuntur culpa deserunt doloribus ducimus ea et exercitationem explicabo illo incidunt ipsam iste magnam magni maxime, molestiae molestias nam nihil nobis nostrum obcaecati officia omnis porro possimus quia reprehenderit repudiandae rerum sed sequi sunt temporibus tenetur ullam? Aspernatur et eum ipsam maxime nobis nulla quae quia quibusdam quo sint tempora tempore, totam voluptates? Accusamus aspernatur cum, dignissimos dolores ea et excepturi ipsa iure minima quas? Alias deserunt dignissimos esse eum exercitationem, fuga harum magni modi natus, nemo neque nostrum numquam porro provident quibusdam quisquam ratione similique unde ut veritatis? Asperiores deleniti distinctio dolorem, dolores earum est excepturi fuga ipsam itaque laboriosam laborum maxime omnis perferendis possimus qui quia repellat tempore velit voluptas, voluptatum? Aliquam, amet deleniti dignissimos dolor eaque et facilis harum maiores maxime nemo rerum temporibus tenetur ut vitae voluptatibus. Harum illo inventore saepe? Beatae dolorum enim, expedita facere molestiae praesentium quisquam recusandae reprehenderit? Ad atque corporis dicta, dolore, est fugiat harum hic impedit laboriosam possimus recusandae voluptate! Aperiam aspernatur atque culpa cum dicta ducimus enim ex impedit ipsa ipsam itaque magnam mollitia nisi nobis nulla obcaecati officia optio placeat quaerat quisquam repellat repudiandae, sapiente, sed soluta sunt temporibus ullam unde ut vero voluptatem! Autem cum enim impedit ipsam maxime non omnis perspiciatis repellendus sapiente voluptas. Aut mollitia necessitatibus saepe sapiente! Beatae nam natus quo repellendus unde. Autem cupiditate exercitationem id inventore itaque natus nisi possimus ratione repudiandae totam! A accusamus aperiam asperiores aspernatur autem, consectetur dolorem ea eum eveniet, ex explicabo harum illum incidunt ipsum iure magni minima molestias nemo nihil odio possimus quam quasi quibusdam quis quisquam quo ratione rem similique, sit tempora ullam ut vel veniam? Architecto asperiores assumenda dolores in inventore mollitia neque nobis nulla, quae qui quo ratione vitae. A ab alias aperiam aspernatur atque beatae distinctio doloribus eaque error et eveniet facere fugit id, illum ipsum iste iusto magni maxime minima molestiae mollitia nihil nisi pariatur porro praesentium quae quam, quibusdam quisquam quod reprehenderit repudiandae saepe, vel vitae voluptas voluptate voluptatem voluptatum? Ad culpa dolor dolore facilis in ipsa, libero maxime molestias repellendus tempora tempore ut. Accusantium adipisci amet commodi corporis enim est labore laudantium nam perferendis, quibusdam veniam voluptate? Animi aperiam commodi delectus deleniti deserunt ea, eveniet fugiat fugit iste modi nemo nobis odio officia optio, quisquam rem, ullam. Aliquid cum explicabo quam voluptas. Aliquid cumque deserunt molestias voluptatem. Accusamus, adipisci aliquam commodi cumque doloribus enim eos in laboriosam laudantium obcaecati quidem, vel veritatis vero. Ab accusamus, aliquid animi at blanditiis commodi consequuntur dicta dolore doloremque eaque eos et eveniet facere harum, id illo illum ipsa ipsum laborum maxime minima molestiae nam neque nesciunt praesentium quasi qui quibusdam quis ratione repellendus reprehenderit sit suscipit tempora, tenetur totam vitae voluptates? Accusamus aliquam aperiam asperiores aspernatur assumenda at atque beatae consequatur culpa dolore ducimus eius, facere fuga fugiat ipsum iure laboriosam magnam nam neque non nostrum odio perferendis perspiciatis quaerat quod ratione repellat similique sint sunt tempore unde vel velit veniam veritatis vitae voluptas voluptatem. Aut cupiditate eaque eveniet, ex fugit, nesciunt non quaerat reiciendis repudiandae sequi vitae, voluptas. Aperiam aspernatur consectetur corporis dicta distinctio dolore eaque eos esse ex ipsam laudantium nemo nobis odio, quos, repellat repellendus ut, veniam vero! Assumenda ea explicabo magnam odit quam recusandae tenetur voluptatum. Ab animi asperiores consectetur, earum, facere ipsa itaque labore laboriosam magni modi perspiciatis, placeat quae ratione sapiente tempore! Adipisci aut deserunt dicta dolorem, enim est et eveniet excepturi fugit modi, omnis perferendis quibusdam quidem quos repudiandae sed voluptatibus! Et inventore praesentium quod repudiandae rerum! At, corporis culpa dicta eveniet fuga fugiat id illo ipsam iure minus natus odio officiis quaerat quam qui quod rem reprehenderit repudiandae sint sit, ullam vero voluptate? Error, reprehenderit, veritatis? Accusamus ad amet, deserunt dolor dolore doloribus ea, eaque earum, facilis fugiat id illo incidunt laborum maiores nisi praesentium qui quia repellat tenetur voluptatibus. Autem deleniti deserunt dolor eaque, error, id illo inventore libero optio pariatur quae quas, quia rem similique sit suscipit tempora temporibus unde vel voluptatum. A accusamus amet animi cumque delectus ducimus eius, eligendi harum illum inventore ipsum iusto laudantium libero magnam nemo nisi nobis nostrum, obcaecati perferendis placeat possimus provident quo rerum sit sunt suscipit vel veniam. A asperiores at blanditiis, cumque debitis ea eveniet inventore ipsum iure iusto maxime minus mollitia nostrum, pariatur porro quae quas quasi quibusdam sed sequi sit ullam unde ut voluptatibus voluptatum? Ad alias aliquid amet architecto asperiores atque deserunt ducimus est excepturi ipsa laboriosam nemo nesciunt, nobis nulla officiis quibusdam quidem recusandae repellat, sequi sint, suscipit vero vitae? A aliquam dolore ea enim fugiat impedit laudantium minus molestias provident quam repudiandae, sed, veritatis! Aliquam aperiam corporis enim error expedita impedit inventore molestiae nemo perspiciatis quam saepe, sunt tenetur vitae? Cum doloribus dolorum ducimus est eum eveniet mollitia natus nihil, vitae! A consequuntur dolores et facere nostrum praesentium recusandae sequi sunt. Accusamus, aliquid dolore doloremque esse incidunt iste iusto molestiae nam neque nobis non numquam odit officiis placeat porro, possimus quam, ratione reiciendis sequi suscipit tempore tenetur vitae. Adipisci assumenda est facere in ipsa, iste labore magnam minima neque nihil, nobis non officiis pariatur porro tempora vel voluptates voluptatibus? Accusamus accusantium aliquid commodi dicta ea harum in inventore ipsum labore laborum mollitia nesciunt nihil nisi non nostrum odio placeat quae quas, quia quidem quo rerum similique suscipit, veritatis voluptate. Accusamus animi at debitis dolore doloremque eaque fugit id iste maiores, nemo nisi porro quas quibusdam quod tempora, vel velit, veniam! Inventore, omnis?</p>
</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function() {

        var demo = $('#demo');

        console.log(demo.scrollTop());
        console.log(demo.scrollLeft());

        demo.scrollTop(300);
        demo.scrollLeft(100);

        console.log(demo.scrollTop());
        console.log(demo.scrollLeft());
    });
</script>
</body>

</html>
